<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>堆叠上下文</title>
</head>
<style>
  p.intorduction{
    width: 600px;
    margin-left: 30px;
  }
  strong{
    color: red;
  }
</style>
<body>
  <h3>1、堆叠上下文</h3>
  <p class="intorduction">
    堆叠上下文 <code>statck context</code>,他是一块区域，这块区域由某个元素创建,它规定了该区域中的内容在Z轴上的排列的先后顺序。
  </p>
  <h4>1.1创建堆叠上下文的元素</h4>
  <ul>
    <li><strong>html</strong> 元素</li>
    <li>设置了 <strong>z-index</strong> 数值的 <strong>定位</strong> 元素</li>
  </ul>
  <h4>1.2 同一个堆叠上下文中元素在Z轴上的排列顺序</h4>
  <ul>
    <li>
      1、先显示创建了堆叠上下文的元素的背景和边框
    </li>
    <li>
      2、再显示z-index为负值的堆叠上下文
    </li>
    <li>
      3、再显示常规流非定位的块盒（平凡块盒？）
    </li>
    <li>
      4、再显示非定位浮动盒子（平凡浮动盒子？）
    </li>
    <li>
      5、常规流非定位行盒(平凡行盒？)
    </li>
    <li>
      6、任何z-index是auto的定位子元素，以及z-index=0的堆叠上下文
    </li>
    <li>
      7、堆叠级别为正数的堆叠上下文
    </li>
    <div style="position: relative;color: white;z-index:0 ;width: 400px;height: 300px; background-color: aqua;">
      <div style="z-index:-1 ;width: 200px;height: 50px; background-color: red;">
        1、z-index为负数的堆叠上下文
      </div>
      <div style="margin: -10px 0 0 5px;z-index:-1 ;width: 200px;height: 50px; background-color: blue;">
        1、兄弟堆叠元素z-index相同，按栈来理解
      </div>
      <div style="color: black;margin: -10px 0 0 15px;width: 200px;height: 50px; background-color: yellow;">
        2、常规流非定位元素
      </div>
      <div style="float: left;;margin: -10px 0 0 25px;width: 200px;height: 50px; background-color: chocolate;">
        3、非定位浮动盒子
      </div>
      <span style="float: left;;margin: -10px 0 0 35px;width: 200px;height: 50px; background-color: lightgreen;">
        4、常规流非定位行盒(平凡行盒？)
      </span>
    </div>
  </ul>
  <h4>1.3 每个堆叠上下文作为单个整体且相互独立，不能穿插</h4>
  <p class="intorduction">
    意思就是堆叠1里面的几个层，和堆2里面的几个层，不能穿插。
    如果堆1高于堆2，那么堆1里面所有的层不管怎么设置都高于堆2.
    这就是狗仗人势？
  </p>
</body>
</html>